<template>
  <div class="wms-shipment-order-detail">
    <ElTable
      :data="detailList"
      v-loading="loading"
      border
      size="small"
      style="width: 100%"
    >
      <ElTableColumn label="商品信息" min-width="200">
        <template #default="{ row }">
          <div class="item-info">
            <div class="item-name">{{ row.itemName }}</div>
            <div class="sku-name">{{ row.skuName }}</div>
          </div>
        </template>
      </ElTableColumn>

      <ElTableColumn
        label="计划数量"
        prop="plannedQuantity"
        width="100"
        align="center"
      />
      <ElTableColumn
        label="实际数量"
        prop="actualQuantity"
        width="100"
        align="center"
      />
      <ElTableColumn label="单价" prop="price" width="100" align="right">
        <template #default="{ row }">
          {{ row.price ? `¥${row.price}` : "-" }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="金额" width="100" align="right">
        <template #default="{ row }">
          {{
            (row.actualQuantity || 0) * (row.price || 0) > 0
              ? `¥${((row.actualQuantity || 0) * (row.price || 0)).toFixed(2)}`
              : "-"
          }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="批次号" prop="batchNo" width="120" />
      <ElTableColumn
        label="备注"
        prop="remark"
        min-width="150"
        show-overflow-tooltip
      />
    </ElTable>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { WmsShipmentOrderService } from "@/api/wms/orderApi";

defineOptions({ name: "WmsShipmentOrderDetail" });

// Props
interface Props {
  orderId: number;
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
});

// Emits
interface Emits {
  (e: "loaded", orderId: number): void;
}

const emit = defineEmits<Emits>();

// 明细列表
const detailList = ref<WMS.Order.ShipmentOrderDetailInfo[]>([]);
const detailLoading = ref(false);

// 监听订单ID变化
watch(
  () => props.orderId,
  (orderId) => {
    if (orderId) {
      loadDetail();
    }
  },
  { immediate: true },
);

// 加载明细
const loadDetail = async () => {
  detailLoading.value = true;
  try {
    const response = await WmsShipmentOrderService.getShipmentOrderDetail(
      props.orderId,
    );
    detailList.value = response.data || [];
    emit("loaded", props.orderId);
  } catch (error) {
    console.error("加载出库单明细失败:", error);
    detailList.value = [];
  } finally {
    detailLoading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.wms-shipment-order-detail {
  padding: 16px;

  .item-info {
    .item-name {
      font-weight: 500;
      color: var(--el-text-color-primary);
      margin-bottom: 4px;
    }

    .sku-name {
      font-size: 12px;
      color: var(--el-text-color-regular);
    }
  }
}
</style>
